<template>
	<view id='container'>
		<view class='totalView pl-15 pr-15'>
			<text class='totalTextView'>当前余额：{{walletInfo.balanceAmount}}</text>
			<button id='withdrawBtn' @tap='gotoWithdraw'>立即提现</button>
		</view>
		<view>
			<view v-for="(sectionItem,sectionIndex) in dataArray" :key="sectionIndex-i">
				<view class='sectionTitleView pl-15 pr-15'>{{sectionItem.sectionTitle}}</view>
				<view class='sectionBodyView pl-15 pr-15'>
					<view class='cellView' v-for="(cellItem,cellIndex) in sectionItem.sectionData" :key="cellIndex-j">
						<view :class='[cellItem.num >= 0 ? "cellNum-blue" : "cellNum"]'>
							<text>{{cellItem.num}}</text>
						</view>
						<view class='cellTitle'>
							<text>{{cellItem.title}}</text>
						</view>
						<view class='cellTime'>
							<text>{{cellItem.time}}</text>
						</view>
					</view>
				</view>

			</view>
		</view>
		<view class='loadMoreView' @tap='loadMoreAction'>
			<text>{{bottomTitle}}</text>
		</view>

		<view class='qcodeHide' v-if="isWithdrawShow">
			<view class='walletContent'>
				<image src='../../static/assets/cancel.png' class='cancelStyle' @tap='cancelAction'></image>
				<view class='walletTitle'>请输入你要提现的数量</view>
				<view class='inputArea_1'>
					<text>¥</text>
					<input class='phoneInput' :placeholder="'最多可提现'+walletInfo.balanceAmount" auto-focus bindinput="withdrawInput"
					 :value='withdrawNum' />
					<text class='allView' @tap='allCashAction'>全部</text>
				</view>
				<view class='bind_1' @tap='ensureAction'>确定</view>
			</view>
		</view>

		<view class='qcodeHide' v-if="isWithdrawConfirm">
			<view class='walletContent'>
				<image src='../../static/assets/cancel.png' class='cancelStyle' @tap='cancelAction'></image>
				<view class='walletTitle1'>确认提现</view>
				<view class="withdrawView">
					<text class='withdrawNumView'>{{withdrawNum}}</text>
				</view>
				<view class='bind_1' @tap='confirmAction'>确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from "../../common/apis.js";
	import message from "../../common/message.js";
	import util from "../../common/util.js";

	export default {
		data() {
			return {
				pageSize: 20,
				pageNum: 0,
				dataArray: [],
				originalArr: [],
				bottomTitle: '点击加载更多',

				isWithdrawShow: false,
				withdrawNum: null,
				isWithdrawConfirm: false,
				walletInfo: {}
			}
		},
		onLoad: function(options) {
			this.loadWalletData();
		},
		onPullDownRefresh: function() {
			this.pageNum = 0
			this.loadWalletData();
		},
		onReachBottom: function() {
			if (this.bottomTitle === '无更多数据') {
				return
			}
			this.loadMoreAction();
		},
		methods: {
			gotoWithdraw() {
				this.getbaseInfo()
			},
			loadMoreAction() {
				if (this.bottomTitle === '无更多数据') {
					return
				}
				let temp = this.pageNum;
				temp += 1;
				this.pageNum = temp
				this.loadWalletDetailData(this.pageNum);
			},
			loadWalletData() {
				let token = uni.getStorageSync("authorization");
				uni.showLoading({
					title: "加载中"
				});
				uni.request({
					url: api.walletInfoApi,
					method: "GET",
					header: {
						Authorization: "Bearer " + token
					},
					success: res => {
						uni.hideLoading();
						this.loadWalletDetailData(this.pageNum);
						if (res.statusCode == "200") {
							let data = this;
							this.walletInfo = data
						} else {
							util.errHandler(res)
						}
					}
				});
			},

			loadWalletDetailData(pageNum) {
				let token = uni.getStorageSync("authorization");
				uni.showLoading({
					title: "加载中"
				});
				uni.request({
					url: api.walletDetailApi + "?" + "page=" + pageNum + "&size=" + "20",
					method: "GET",
					header: {
						Authorization: "Bearer " + token
					},
					success: res => {
						uni.hideLoading();
						uni.stopPullDownRefresh();
						if (res.statusCode == "200") {
							let data = this;
							if (data.length == 0) {
								this.bottomTitle = '无更多数据'
								return
							}

							if (pageNum == 0) {
								this.originalArr = []
							}
							data.forEach(element => {
								this.originalArr.push(element);
							});
							this.dataArray = this.filterData(this.originalArr)
						} else {
							util.errHandler(res)
						}
					}
				});
			},

			filterData(originalArr) {
				let temp = [];
				originalArr.forEach(element => {
					temp.push(element.date.substring(0, 7));
				});

				let uniqArr = util.uniq(temp);

				let outerArr = [];
				uniqArr.forEach(element => {
					let obj = {};
					obj.sectionTitle = element;
					obj.sectionData = [];
					outerArr.push(obj);
				});

				outerArr.forEach(element => {
					originalArr.forEach(innerEle => {
						if (innerEle.date.substring(0, 7) == element.sectionTitle) {
							let obj = {};
							if (innerEle.tradeType == 1) {
								obj.num = "-" + innerEle.displayProfitAmount;
							} else {
								obj.num = "+" + innerEle.displayProfitAmount;
							}
							obj.time = innerEle.date;
							if (innerEle.tradeType == 1) {
								obj.title = "提现";
							} else if (innerEle.tradeType == 2) {
								obj.title = "收益";
							} else if (innerEle.tradeType == 3) {
								obj.title = "节点收益";
							} else if (innerEle.tradeType == 4) {
								obj.title = "算力收益";
							} else if (innerEle.tradeType == 5) {
								obj.title = "共建收益";
							}
							element.sectionData.push(obj);
						}
					});
				});
				outerArr.forEach(element => {
					element.sectionTitle.replace('-', '年') + '月'
				})
				return outerArr;
			},

			withdrawInput(e) {
				this.withdrawNum = e.detail.value;
			},
			cancelAction() {
				this.isWithdrawShow = false
				this.isWithdrawConfirm = false
			},
			allCashAction() {
				let total = this.walletInfo.balanceAmount
				this.withdrawNum = total
			},
			ensureAction() {
				if (this.withdrawNum == 0 || this.withdrawNum == null) {
					message.showWarning('提现金额有误')
					return
				}

				this.isWithdrawShow = false
				this.isWithdrawConfirm = true
			},
			getbaseInfo() {
				let token = uni.getStorageSync("authorization");
				uni.showLoading({
					title: "加载中"
				});
				uni.request({
						url: api.getBaseInfoApi,
						method: "GET",
						header: {
							Authorization: "Bearer " + token
						},
						success: res => {
							uni.hideLoading();
							if (res.statusCode == 200) {
								if (res.statusCode == 200) {
									if (this.mobile && this.mobile != 'null') {} else {
										message.showWarning('请绑定手机号码')
										return
									}

									if (this.cashWallet && this.cashWallet != 'null') {} else {
										message.showWarning('请绑定钱包地址')
										return
									}

									wx.showToast({
										title: '由于当前处于开发网络，所获得的均为模拟收益，无法进行提现，收益仅供参考',
										icon: 'none',
										duration: 5000
									})
									return
									self.isWithdrawShow=true
								} else {
									util.errHandler(res)
								}
						} else {
							util.errHandler(res)
						}
					}
				});
		},
		confirmAction() {
			let token = uni.getStorageSync("authorization");
			uni.showLoading({
				title: "加载中"
			});
			uni.request({
				url: api.cashApi,
				method: "POST",
				data: this.withdrawNum,
				header: {
					Authorization: "Bearer " + token
				},
				success(res) {
					uni.hideLoading();
					console.log(res);
					if (res.statusCode == "200") {
						let data = this;

						this.isWithdrawConfirm = false
						message.showSuccess("提现申请已提交")
					} else {
						util.errHandler(res)
					}
				}
			});
		}
	}
	};
</script>

<style>
	.totalView {
		height: 34px;
		line-height: 34px;
	}

	.totalTextView {
		width: 132px;
		height: 40upx;
		font-size: 16px;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		line-height: 40upx;
		margin-left: 20upx;
	}

	#withdrawBtn {
		float: right;
		width: 100px;
		height: 24px;
		line-height: 24px;
		background: rgba(54, 102, 144, 1);
		border-radius: 4px;
		font-size: 14px;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		margin-top: 10upx;
		margin-right: 20upx;
	}

	.sectionTitleView {
		height: 30px;
		line-height: 30px;
		background: rgba(238, 238, 238, 1);
		padding: 20upx;
	}

	.cellView {
		height: 40px;
		border-bottom: 1px solid rgba(226, 223, 223, 1);
		padding: 0 10upx;
	}

	.cellTitle {
		height: 18px;
		margin-top: 7px;
		font-size: 13px;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}

	.cellTime {
		margin-top: 3px;
		margin-bottom: 2px;
		height: 13px;
		font-size: 9px;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}

	.cellNum {
		float: right;
		height: 40px;
		font-size: 14px;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		color: rgba(0, 0, 0, 1);
		line-height: 40px;
	}

	.cellNum-blue {
		float: right;
		height: 40px;
		font-size: 14px;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		color: #3375fd;
		line-height: 40px;
	}

	.loadMoreView {
		margin: 10px auto;
		width: 55px;
		height: 13px;
		font-size: 9px;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
		line-height: 13px;
	}

	/* 提现相关 */
	.allView {
		margin-left: 20px;
		height: 17px;
		font-size: 14px;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		color: #3375fd;
		line-height: 17px;
	}

	.qcodeHide {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(217, 217, 217, 0.9);
		height: 100%;
		z-index: 1000;
	}

	.phoneInput {
		margin-left: 5px;
		height: 23px;
	}

	.cancelStyle {
		float: right;
		margin-right: 5px;
		margin-top: 5px;
		width: 24px;
		height: 24px;
	}

	.walletTitle {
		font-size: 18px;
		width: 80%;
		margin: 0 auto;
		margin-top: 32px;
		font-weight: 500;
	}

	.walletTitle1 {
		font-size: 18px;
		width: 80%;
		margin: 0 auto;
		margin-top: 32px;
		font-weight: 500;
		text-align: center
	}

	.walletContent {
		width: 90%;
		height: 162px;
		background: white;
		border-radius: 10px;
		margin: 14px auto;
		background-clip: padding-box;
		font-size: 16px;
		overflow: hidden;
		margin-top: 191px;
		padding-bottom: 20px;
	}

	.inputArea_1 {
		border-bottom: 1px solid rgba(0, 0, 0, 0.07);
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		height: 45px;
		width: 80%;
		margin: 0 auto;
		margin-top: 20px;
	}

	.bind_1 {
		margin: 0 auto;
		margin-top: 15px;
		width: 63%;
		height: 24px;
		text-align: center;
		line-height: 24px;
		color: white;
		background: #366690;
		border-radius: 5px;
		font-size: 14px;
	}

	.withdrawView {
		line-height: 100%;
		text-align: center;
		height: 45px;
		width: 90%;
		margin: 0 auto;
		margin-top: 20px;
	}

	.withdrawNumView {
		text-align: center;
	}

	.sectionBodyView {
		padding: 0 20upx;
	}
</style>
